<template>
	<view class="">
		<view class="Ultramans">
			<view class="">
				当前定位:长春
			</view>
			<!-- <view class="">
				切换
			</view> -->
		</view>
		<view class="Ultramans_ax">
			<view class="Ultramans_ax_a">
				<view class="Ultramans_ax_a_a"></view>
				<view class="">
					<text>区域</text> <text class="Ultramans_ax_a_a_text">/可多选</text>
				</view>
			</view>
			<view class="Ultramans_ax_a_as">
				<view v-for="(item, index) in capsuleOptions" :key="index" class="capsule"
					:class="{ 'selected': isSelected(item.value) }" @click="toggleSelect(item.value,item)">
					<text>{{ item.label }}</text>
				</view>
			</view>
		</view>
		<!-- 第二个 -->
		<view class="Ultramans_ax">
			<view class="Ultramans_ax_a">
				<view class="Ultramans_ax_a_a"></view>
				<view class="">
					<text>品类</text> <text class="Ultramans_ax_a_a_text">/可多选</text>
				</view>
			</view>
			<view class="Ultramans_ax_a_as">
				<view v-for="(item, indexs) in capsuleOptionss" :key="indexs" class="capsules"
					:class="{ 'selecteds': isSelecteds(item.name) }" @click="toggleSelects(item.name,item.id)">
					<text>{{ item.name }}</text>
				</view>
			</view>
			<view class="Ultramans_ax_a_as_kmhj" @click="tioz">
				确定
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				capsuleOptions: [{
						label: '南关区',
						value: '220102'
					},
					{
						label: '宽城区',
						value: '220103'
					},
					{
						label: '朝阳区',
						value: '220104'
					},
					{
						label: '二道区',
						value: '220105'
					},
					{
						label: '绿园区',
						value: '220106'
					},
					{
						label: '经开区',
						value: '220171'
					},
					{
						label: '净月区',
						value: '220172'
					},
					{
						label: '高新区',
						value: '220173'
					}
				],
				selectedValues: [], // 存储用户选择的值的数组  
				capsuleOptionss: [],
				aselectedValues: [],
				as: [],
				bs: []
			};
		},
		onLoad() {
			this.$ajax('get', 'recovery/recycling/category/list', {
				type: 1
			}).then((res) => {
				console.log(res)
				this.capsuleOptionss = res.data
			})
		},
		methods: {
			tioz() {
				this.$ajax('post', 'recovery/recycler/info/recyclerSetting', {
					regions: this.as,
					categoryIds: this.bs
				}).then((res) => {
					this.$api.msg('设置成功')
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/index/index'
						})
					}, 600)

				})

			},
			isSelected(value) {
				return this.selectedValues.includes(value);
			},
			toggleSelect(value, item) {
				const index = this.selectedValues.indexOf(item);
				if (index !== -1) {
					this.selectedValues.splice(index, 1); // 如果已选中，则移除  
				} else {
					this.selectedValues.push(value); // 如果未选中，则添加  
					this.as.push(item)
				}
				console.log(this.as, 'b');
			},
			isSelecteds(values) {
				return this.aselectedValues.includes(values);
			},
			toggleSelects(values, type) {
				const index = this.aselectedValues.indexOf(values);
				if (index !== -1) {
					this.aselectedValues.splice(index, 1); // 如果已选中，则移除  
				} else {
					this.aselectedValues.push(values); // 如果未选中，则添加  
					this.bs.push(type)
				}
				console.log(this.bs, 'a');
			},

		}
	};
</script>

<style>
	.Ultramans {
		background-color: #f6f6f6;
	}

	.Ultramans_ax_a_as {
		display: flex;
		margin-top: 10px;
		flex-wrap: wrap;
		align-items: center;
	}

	.Ultramans_ax_a_as_kmhj {
		width: 85%;
		height: 55px;
		text-align: center;
		line-height: 55px;
		background-color: #2a77fa;
		color: #fff;
		margin: 150px auto;
		border-radius: 6px;
	}

	.capsule {
		width: 80px;
		height: 30px;
		line-height: 30px;
		text-align: center;
		border-radius: 15px;
		margin: 5px;
		background-color: #eee;
	}

	.capsule.selected {
		background-color: #dfeefa;
	}

	.capsules {
		width: 80px;
		line-height: 30px;
		padding: 0 5px;
		text-align: center;
		border-radius: 20px;
		margin: 5px;
		background-color: #eee;
	}

	.capsules.selecteds {
		background-color: #dfeefa;
	}

	.Ultramans {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20px 20px;
	}

	.Ultramans_ax {
		background-color: #fff;
		padding: 10px 20px;
	}

	.Ultramans_ax_a {
		display: flex;
		align-items: center;
	}

	.Ultramans_ax_a_a {
		background-color: blue;
		width: 5px;
		height: 10px;
		border-radius: 5px;
		margin-right: 5px;
	}

	.Ultramans_ax_a_a_text {
		font-size: 13px;
		color: #c5c5c5;
		margin-left: 5px;
	}
</style>